<template>
	<div class="dictSetting">
		<div class="dictSetting-left">
			<h4>字典类型</h4>
			<div class="searchBar">
				<el-input
					v-model="typeSearch"
					placeholder="请输入字典类型"
					size="mini"
					clearable
					style="width: 60%"
				>
					<el-button
						slot="append"
						icon="el-icon-search"
						@click="handlerSearch"
					></el-button
				></el-input>
				<el-button type="primary" size="mini" @click="handlerAddType"
					>新增</el-button
				>
			</div>
			<div
				ref="type-list"
				v-infinite-scroll="getTypelist"
				class="type-list"
				style="overflow-y: auto"
				infinite-scroll-immediate="scroll"
				infinite-scroll-disabled="infiniteScrollDisabled"
			>
				<template v-if="typeList.length">
					<div
						v-for="i in typeList"
						:key="i.id"
						class="type-list-item"
						:class="isActive(i) ? 'item-active' : ''"
						@click.prevent="handlerClickTypeItem(i)"
					>
						<span>
							<span>
								<span v-if="i.name.length > 6"
									><el-tooltip
										class="item"
										effect="dark"
										:content="i.name"
										placement="top"
									>
										<span>{{ checkTextLength(i.name) }}</span>
									</el-tooltip></span
								>
								<span v-else>{{ i.name }}</span>
							</span>
							<span> / </span>
							<span>
								<span v-if="i.type.length > 6"
									><el-tooltip
										class="item"
										effect="dark"
										:content="i.type"
										placement="top"
									>
										<span>{{ checkTextLength(i.type) }}</span>
									</el-tooltip></span
								>
								<span v-else>{{ i.type }}</span>
							</span>
						</span>

						<span
							><el-button
								type="text"
								size="mini"
								@click.stop="handlerEditType(i)"
								>编辑</el-button
							>
							<el-button type="text" size="mini" @click.stop="handlerDelType(i)"
								>删除</el-button
							></span
						>
					</div>
				</template>
				<template v-else>
					<div class="type-list-none">暂无数据</div>
				</template>
			</div>
		</div>
		<div class="dictSetting-right">
			<h4>字典集合</h4>
			<div class="searchBar">
				<el-input
					v-model="nameSearch"
					placeholder="请输入字典名称"
					size="mini"
					clearable
					style="width: 60%"
				>
					<el-button
						slot="append"
						icon="el-icon-search"
						@click="getDictPageList(1, 1)"
					></el-button
				></el-input>
				<el-button type="primary" size="mini" @click="handlerAddDict"
					>新增</el-button
				>
			</div>
			<div ref="dictList" class="dist-list">
				<shyt-table
					ref="shytTable"
					:columns="columns"
					:data="dictList"
					:auto-resize="true"
					:height="height"
					:pager-config="pagerConfig"
					@page-change="pageChange"
				>
					<template #edit="{ row }">
						<el-button type="text" size="small" @click="handlerEditDict(row)">
							编辑
						</el-button>
						<el-button type="text" size="small" @click="handlerDelDict(row)">
							删除
						</el-button>
					</template>
				</shyt-table>
			</div>
		</div>
		<typeAdd
			:title="title"
			:type-visible.sync="typeVisible"
			:type="type"
			:cur-type.sync="curType"
			@onSubmit="handlerSubmitType"
		></typeAdd>
		<addDictVue
			:dict-title="dictTitle"
			:dict-visible.sync="dictVisible"
			:dict-type="dictType"
			:cur-item.sync="curDict"
			@onSubmit="handlerSubmitDict"
		></addDictVue>
	</div>
</template>

<script>
import typeAdd from './components/addType.vue'
import addDictVue from './components/addDict.vue'
import {
	dictTypeInsert,
	dictTypeDelete,
	getDictTypePageList,
	updateDictType,
	getDictPageList,
	dictInset,
	updateDict,
	deleteDict,
} from '@/http/dict'
import { getOrgList } from '@/http/org'
export default {
	name: 'DictSetting',
	components: {
		typeAdd,
		addDictVue,
	},
	data() {
		return {
			typeSearch: '',
			nameSearch: '',
			curItem: {},
			typeList: [],
			dictList: [],
			page: 1,
			pageSize: 12,
			distListPage: 1,
			pagerConfig: {
				currentPage: 1,
				pageSize: 10,
				pageSizes: [10, 20, 30, 50],
				total: 0,
				background: true,
				layouts: [
					'PrevPage',
					'JumpNumber',
					'NextPage',
					'FullJump',
					'Sizes',
					'Total',
				],
			},
			columns: [
				{
					field: 'display',
					title: '字典描述',
				},
				{
					field: 'value',
					title: '字典值',
					width: '60%',
				},
				{
					title: '操作',
					slots: { default: 'edit' },
					width: '100px',
				},
			],
			height: null,
			title: '',
			typeVisible: false,
			scroll: false,
			infiniteScrollDisabled: false,
			type: '',
			dictTitle: '',
			dictVisible: false,
			dictType: '',
			curType: {
				name: '',
				type: '',
				remark: '',
				orgUuid: '',
			},
			curDict: {
				type: '',
				display: '',
				value: '',
				sort: 1,
				remark: '',
				orgUuid: '',
			},
			orgList: [],
		}
	},
	async mounted() {
		let dom = this.$refs.dictList
		this.height = dom.offsetHeight - 20
		this.getOrgList()
		let domH = this.$refs['type-list'].offsetHeight
		this.pageSize = Math.ceil((domH - 20) / 40) + 1
		await this.getTypelist()
	},
	methods: {
		getOrgName(id, arr) {
			let res
			arr = arr || this.orgList
			res = arr.find(k => k.id == id)
			return res?.orgName
		},
		getOrgList() {
			getOrgList({}).then(({ data }) => {
				if (data?.head?.code == 200) {
					this.orgList = data.data
				}
			})
		},
		pageChange({ currentPage, pageSize }) {
			this.pagerConfig.currentPage = currentPage
			this.pagerConfig.pageSize = pageSize
			this.getDictPageList()
		},
		handlerSubmitDict(data, type) {
			if (type == '1') {
				dictInset(data).then(({ data }) => {
					if (data?.head?.code == 200) {
						this.$message.success('新建成功')
						this.dictVisible = false
						this.getDictPageList()
					}
				})
			} else {
				updateDict(data).then(({ data }) => {
					if (data?.head?.code == 200) {
						this.$message.success('编辑成功')
						this.dictVisible = false
						this.getDictPageList()
					}
				})
			}
		},
		handlerSubmitType(data, type) {
			if (type == '1') {
				data.orgUuid = data.orgUuid == -1 ? null : data.orgUuid
				dictTypeInsert(data).then(({ data }) => {
					if (data?.head?.code == 200) {
						this.$message.success('新建成功')
						this.typeVisible = false
						this.getTypelist(false, 1)
					}
				})
			} else {
				delete data.orgUuid
				updateDictType(data).then(({ data }) => {
					if (data?.head?.code == 200) {
						this.$message.success('编辑成功')
						this.typeVisible = false
						this.getTypelist(false, 1)
					}
				})
			}
		},
		handlerAddType() {
			this.typeVisible = true
			this.type = '1'
			this.curType = {
				name: '',
				type: '',
				remark: '',
				orgUuid: '',
			}
			this.title = '新增字典类型'
		},
		handlerAddDict() {
			if (!this.curItem.id) return
			this.dictVisible = true
			this.dictType = '1'
			this.curDict = {
				type: this.curItem.type,
				display: '',
				value: '',
				sort: 1,
				remark: '',
				orgUuid: this.curItem.orgUuid,
			}
			this.dictTitle = '新增字典'
		},
		handlerSearch() {
			getDictTypePageList({
				pageNum: 1,
				pageSize: this.pageSize,
				name: this.typeSearch || null,
			}).then(({ data }) => {
				if (data?.head?.code == 200) {
					if (!data.data.records || data.data.records.length == 0) {
						this.typeList = []
					} else {
						this.typeList = data.data.records
					}
				}
			})
		},
		getTypelist(bol, page) {
			return new Promise(rs => {
				this.infiniteScrollDisabled = true
				if (page) {
					this.page = 1
				}
				getDictTypePageList({
					pageNum: this.page,
					pageSize: this.pageSize,
					name: this.typeSearch || null,
				}).then(({ data }) => {
					// console.log(data)
					if (data?.head?.code == 200) {
						if (!data.data.records || data.data.records.length == 0) {
							this.page = this.page - 1 || 0
							rs(data.data.records)
							return
						}
						this.typeList =
							this.page == 1
								? data.data.records
								: this.typeList.concat(data.data.records)
						this.infiniteScrollDisabled = false
						this.curItem = this.typeList[0] || {}
						this.curDict = {
							type: this.curItem?.type,
							display: '',
							value: '',
							sort: 1,
							remark: '',
							orgUuid: this.curItem?.orgUuid,
						}
						if (this.curItem?.type) {
							this.getDictPageList(this.typeList[0])
						} else {
							this.dictList = []
						}
						if (!bol) {
							this.page = this.page + 1
						}
						rs(data.data.records)
					}
				})
			})
		},
		isActive(item) {
			return item.id === this.curItem.id
		},
		getDictPageList(item, page) {
			let type = item?.type || this.curItem?.type
			if (page) {
				this.pagerConfig.currentPage = 1
			}
			getDictPageList(
				Object.assign(
					{},
					{ type, display: this.nameSearch || null },
					{
						pageNum: this.pagerConfig.currentPage,
						pageSize: this.pagerConfig.pageSize,
					},
				),
			).then(({ data }) => {
				if (data?.head?.code == 200) {
					this.dictList = data.data.records
					this.pagerConfig.total = data.data.total
				}
			})
		},
		handlerClickTypeItem(item) {
			this.curItem = item
			this.getDictPageList(item)
		},
		checkTextLength(text) {
			if (text.length > 6) {
				return text.split('').slice(0, 6).join('') + '...'
			} else {
				return text
			}
		},
		handlerEditType(item) {
			this.type = '2'
			let res = this._.cloneDeep(item)
			if (item.orgUuid != 0) {
				// console.log(this.getOrgName(res.orgUuid))
				res.orgUuid = this.getOrgName(res.orgUuid)
			}
			this.curType = res
			this.typeVisible = true
		},
		handlerDelType(item) {
			// console.log(item)
			this.$confirm('此操作将删除该字典类型, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					dictTypeDelete(item).then(({ data }) => {
						if (data?.head?.code == 200) {
							this.$message.success('删除成功')
							// this.getTypelist(1)
							let index = this.typeList.findIndex(i => i.id === item.id)
							this.typeList.splice(index, 1)
							if (item.id === this.curItem.id) {
								this.curItem = this.typeList[0] || {}
								this.curDict = {
									type: this.curItem?.type,
									display: '',
									value: '',
									sort: 1,
									remark: '',
									orgUuid: this.curItem?.orgUuid,
								}
								if (this.curItem?.type) {
									this.getDictPageList(this.typeList[0])
								} else {
									this.dictList = []
								}
							}
						}
					})
				})
				.catch(() => {})
		},
		handlerEditDict(row) {
			this.dictVisible = true
			this.curDict = { ...row }
			this.dictType = '2'
		},
		handlerDelDict(item) {
			this.$confirm('此操作将删除该字典, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					deleteDict(item).then(({ data }) => {
						if (data?.head?.code == 200) {
							this.$message.success('删除成功')
							this.getDictPageList()
						}
					})
				})
				.catch(() => {})
		},
		mock(num, start) {
			let arr = []
			for (let index = start || 0; index < num; index++) {
				arr.push({ id: index, name: 'ggbeng' + index })
			}
			return arr
		},
	},
}
</script>

<style lang="scss" scoped>
.dictSetting {
	height: 100%;
	display: flex;
	.dictSetting-left {
		border-right: 1px solid #ccc;
		padding: 10px;
		box-sizing: border-box;
		width: 40%;
		h4 {
			padding: 0px;
			margin: 0 0 10px 0;
		}
		.searchBar {
			display: flex;
			justify-content: space-between;
		}
		.type-list {
			height: calc(100% - 22px - 28px);
			padding-top: 20px;
			box-sizing: border-box;
			.item-active {
				background: #ecf5ff;
			}
			.type-list-item {
				height: 40px;
				padding: 0 15px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #e4e7ed;
				box-sizing: border-box;
				transition: all 0.3s;
				&:first-child {
					border-top: 1px solid #e4e7ed;
				}
				&:hover {
					background: #e4e7ed;
				}
			}
			.type-list-none {
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 20px;
				font-weight: 500;
				color: #909399;
			}
		}
	}
	.dictSetting-right {
		flex: 1;
		padding: 10px;
		box-sizing: border-box;
		box-align: border-box;
		h4 {
			padding: 0px;
			margin: 0 0 10px 0;
		}
		.searchBar {
			display: flex;
			justify-content: space-between;
		}
		.dist-list {
			padding-top: 20px;
			box-sizing: border-box;
			height: calc(100% - 22px - 28px);
		}
	}
}
</style>
